<template>
    <div>
        <table>
            <caption>组件属性</caption>
            <tr>
                <th>参数</th>
                <th>说明</th>
                <th>类型</th>
                <th>可选值</th>
                <th>默认值</th>
            </tr>
            <tr>
                <td>data</td>
                <td>被渲染的json对象</td>
                <td>Object</td>
                <td>-</td>
                <td>{}</td>
            </tr>
            <tr>
                <td>options</td>
                <td>组件初始化设置

                </td>
                <td>参数 Object 具有以下属性
                    <highlightjs language="javascript" :code="v1"></highlightjs>
                </td>
                <td>-</td>
                <td>
                    <highlightjs language="javascript" :code="v2"></highlightjs>
                </td>
            </tr>
        </table>
        <div class="title">示例</div>
        <div class="desc">
            <highlightjs language="javascript" :code="v4"></highlightjs>
            默认设置
            <highlightjs language="html" :code="v3"></highlightjs>
        </div>
        <cc-json-view :data="data"></cc-json-view>
        <div class="title">示例</div>
        <div class="desc">
            显示深度和复制按钮
            <highlightjs language="html" :code="v5"></highlightjs>
        </div>
        <cc-json-view :data="data" :options="{showCopy: true, showDeep: true}"></cc-json-view>
        <div class="title">示例</div>
        <div class="desc">
            全部折叠
            <highlightjs language="html" :code="v6"></highlightjs>
        </div>
        <cc-json-view :data="data" :options="{collapsed: true}"></cc-json-view>
        <div class="title">示例</div>
        <div class="desc">
            展开几层
            <highlightjs language="html" :code="v7"></highlightjs>
        </div>
        <cc-json-view :data="data" :options="{collapsed: 2}"></cc-json-view>
    </div>
</template>

<script>
    import CcJsonView from "../components/ccJsonView/index";
    export default {
        name: "ccJsonViewDemo",
        components: {CcJsonView},
        data() {
            return {
                v1: `
                    {
                      showCopy: Boolean, //是否显示复制按钮
                      showDeep: Boolean, //是否显示深度
                      collapsed: Boolean | Number //false全部展开，true全部折叠，数字展开几层
                    }
                `,
                v2: `
                    {
                      showCopy: false,
                      showDeep: false,
                      collapsed: false
                    }
                `,
                v3: `<cc-json-view :data="data"></cc-json-view>`,
                v5: `<cc-json-view :data="data" :options="{showCopy: true, showDeep: true}"></cc-json-view>`,
                v6: `<cc-json-view :data="data" :options="{collapsed: true}"></cc-json-view>`,
                v7: `<cc-json-view :data="data" :options="{collapsed: 2}"></cc-json-view>`,
                v4: `
                    data = {
                    name: 'test',
                    emptyArray: [],
                    emptyObject: {},
                    objectInObject: {
                        someNumber: 333,
                        someString: 'string',
                        boolean: true,
                        null: null,
                        undefined: undefined,
                        NaN: NaN,
                        Symbol: Symbol('symbole'),
                        function: () => {},
                        anyArray: [
                            {
                                imObject: {
                                    c: 1
                                }
                            },
                            666,
                            "String",
                            [
                                {
                                    array: [
                                        3, 2, 1
                                    ],
                                    object: {
                                        nothing: 'to do'
                                    }
                                }
                            ]
                        ]
                    }
                }
                `,
                data: {
                    name: 'test',
                    emptyArray: [],
                    emptyObject: {},
                    objectInObject: {
                        someNumber: 333,
                        someString: 'string',
                        boolean: true,
                        null: null,
                        undefined: undefined,
                        NaN: NaN,
                        Symbol: Symbol('symbole'),
                        function: () => {},
                        anyArray: [
                            {
                                imObject: {
                                    c: 1
                                }
                            },
                            666,
                            "String",
                            [
                                {
                                    array: [
                                        3, 2, 1
                                    ],
                                    object: {
                                        nothing: 'to do'
                                    }
                                }
                            ]
                        ]
                    }
                }
            }
        }
    }
</script>

<style scoped>

</style>